<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <% include "../login/header.html" %>
    <% include "../login/left.html" %>
    <div id="add-main" style="display: none; margin: 50px 0px 0px 0px">
        <form class="layui-form" id="add-form">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">所属行业</label>
                <div class="layui-input-inline">
                    <select name="industry_id" lay-verify="required" lay-search="">
                        <option value=" ">请选择</option>
                        <option value="1">游戏</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">应用名称</label>
                <div class="layui-input-block">
                    <input style="width: 400px" type="text" name="app_name" placeholder="请输入应用名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 30%; margin-top: 10%">
                    <button class="layui-btn" lay-submit lay-filter="add-main">增加</button>
                    <button type="reset" class="layui-btn layui-btn-primary" id="exit-add">退出</button>
                </div>
            </div>
        </form>
    </div>

    <form style="display: none" id="layer_ctr" class="layui-form " lay-filter="form_app" id="ctr">
        <div class="layui-form-item">
            <label class="layui-form-label">应用名称</label>
            <div class="layui-input-block">
                <input type="checkbox" lay-filter="sw_app" name="switch" lay-skin="switch">
            </div>
        </div>
        <div style="margin-top: 5%;width: 300px" class="layui-form-item">
            <label class="layui-form-label">应用名称</label>
            <div class="layui-input-block">
                <select name="city" id="sel_app" lay-filter="sel_app" lay-verify="required">

                </select>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-form-item layui-col-md5">
                <label class="layui-form-label" style="width: 150px">baselineQPS检查</label>
                <input type="checkbox" name="yyy" id="sel_app1" lay-skin="switch" lay-text="ON|OFF">
            </div>
            <div class="layui-col-md5">
                <label class="layui-form-label" style="width: 150px">222</label>
                <input type="checkbox" name="yyy" id="sel_app2" lay-skin="switch" lay-text="ON|OFF">
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-form-item layui-col-md5">
                <label class="layui-form-label" style="width: 150px">baselineQPS检查</label>
                <input type="checkbox" name="yyy" id="sel_app3" lay-skin="switch" lay-text="ON|OFF">
            </div>
            <div class="layui-col-md5">
                <label class="layui-form-label" style="width: 150px">222</label>
                <input type="checkbox" name="yyy" id="sel_app4" lay-skin="switch" lay-text="ON|OFF">
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-form-item layui-col-md5">
                <label class="layui-form-label" style="width: 150px">baselineQPS检查</label>
                <input type="checkbox" name="yyy" id="sel_app5" lay-skin="switch" lay-text="ON|OFF">
            </div>
            <div class="layui-col-md5">
                <label class="layui-form-label" style="width: 150px">222</label>
                <input type="checkbox" name="yyy" id="sel_app6" lay-skin="switch" lay-text="ON|OFF">
            </div>
        </div>


    </form>
    <div id="update-main" style="display: none; margin: 50px 0px 0px 0px">
        <form class="layui-form" id="update-form">
            <input type="hidden" name="id" value="" id="news-id">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">所属行业</label>
                <div class="layui-input-inline">
                    <select name="industry_id" lay-verify="required" lay-search="" id='industry_id'>
                        <option value=" ">请选择</option>
                        <option selected value="1">游戏</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">应用名称</label>
                <div class="layui-input-block">
                    <input style="width: 400px" type="text" name="app_name" placeholder="请输入应用名称" class="layui-input"
                           id='app_name'>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 30%; margin-top: 10%">
                    <button class="layui-btn" lay-submit lay-filter="update-main">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary" id="exit-update">退出</button>
                </div>
            </div>
        </form>
    </div>


    <div class="layui-body">
        <!-- 内容主体区域 -->
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>应用管理</legend>
        </fieldset>
        <div style="padding: 10px;">
                <span class="layui-breadcrumb">
                    <a href="/">首页</a>
                    <a>应用管理</a>
                    <a><cite>应用列表</cite></a>
                </span>
        </div>
        <div style="padding: 30px;" class="layui-form">
                <label class="layui-form-label" style="width: 100px">应用名称</label>
                <div class="layui-col-md3">
                    <div class="layui-input-inline">
                        <input style="width: 400px" type="text" name="app_name" placeholder="请输入应用名称" class="layui-input">
                    </div>
                </div>
                <label class="layui-form-label">APP KEY</label>
                <div class="layui-col-md2">

                    <input style="width: 300px" type="text" name="app_key" placeholder="请输入APP KEY" class="layui-input">
                </div>

            <div class="layui-inline">
                <label class="layui-form-label">所属行业</label>
                <div class="layui-input-block">
                    <select name="industry_id" class="layui-input" lay-verify="">
                        <option value="">请选择</option>
                        <option value="1">游戏</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn " lay-submit lay-filter="find">查询</button>
            </div>


            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <a class="layui-btn" id="add">新增</a>
                    <a class="layui-btn" id="addConfigData">新增配置数据</a>
                    <a class="layui-btn" id="addPropData">新增特征数据</a>
                    <table class="layui-table" lay-skin="nob" id="demo" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="layui-footer">
    <!-- 底部固定区域 -->
    © layui.com - 底部固定区域
</div>
</div>
<script src="../static/layui/layui.js"></script>
<script src="../static/assets/js/global.js"></script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.use(['common'], function () {
      let common = layui.common;
      let form = layui.form,
        $ = layui.jquery,
        table = layui.table,
        layer = layui.layer;

    //JavaScript代码区域
    let addConfigData = document.getElementById('addConfigData');
    addConfigData.addEventListener('click', function cancel() {
        common.setSelect("/appManager/getAppName", 'sel_app');
        common.showLayer({title:['新增配置信息', 'font-size:25px;text-align:center'],width:'600px',height: '600px',name:'#layer_ctr'});
    });

    let add = document.getElementById('add');
    add.addEventListener('click', function cancel() {
      common.showLayer({title:'新增数据',width:'600px',height: '300px',name:'#add-main'});
    });

    let close_update = document.getElementById('exit-update');
    close_update.addEventListener('click', function cancel() {
        layui.layer.closeAll();
    });
    let close_add = document.getElementById('exit-add');
    close_add.addEventListener('click', function cancel() {
        layui.layer.closeAll();
    });

        table.render({
            elem: '#demo'
            , height: 500
            , url: '/appManager/getApplication/' //数据接口
            , page: true //开启分页
            , title: '应用列表'
            , skin: "line"
            , even: true
            , cols: [[ //表头
                {field: 'app_name', title: '应用名称', width: 250}
                , {field: 'app_key', title: 'APP_Key', cellMinWidth: 400}
                , {
                    field: 'industry_id', title: '所属行业', width: 120, templet: function (d) {
                        let type;
                        if (d.industry_id == 1) {
                            type = '游戏'
                        }
                        return type;
                    }
                }
                , {field: 'created_by_id', title: '创建人', width: 150}
                , {field: 'date_created', title: '创建时间', cellMinWidth: 250}
                , {
                    field: 'enable', title: '状态', width: 200, templet: function (d) {
                        return d.enable.data[0] == 0 ? '<span class="layui-badge">失效</span>' : '<span class="layui-badge layui-bg-green">正常</span>'
                    }
                }
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', cellMinWidth: 200}
            ]]
        });

        table.on('tool(test)', (obj) => {
            let data = obj.data;
            $('#news-id')[0].value = data.id;
            $('#industry_id')[0].value = data.industry_id;
            $('#app_name')[0].value = data.app_name;
            if (obj.event === 'edit') {
                common.showLayer({title:'编辑数据',width:'600px',height: '300px',name:'#update-main'});
            } else if (obj.event === 'del') {
                layer.confirm(`确定要删除数据吗？`, function (index, layero) {
                    $.ajax({
                        url: '/appManager/delete', method: 'post', data: {id: data.id}, success: (result) => {
                            if (result == 1) {
                                table.reload('demo'); //数据刷新
                                layer.msg('成功！');
                            } else {
                                layer.msg('失败！');
                            }
                            layer.close(index); //关闭弹层
                        }
                    });
                });
            }

        });

            form.on('switch(sw_app)', function (data) {
                console.log("sasdfasf", $('#sel_app1')[0].checked)
                $('#sel_app1')[0].checked = data.elem.checked;
                $('#sel_app2')[0].checked = data.elem.checked;
                $('#sel_app3')[0].checked = data.elem.checked;
                $('#sel_app4')[0].checked = data.elem.checked;
                $('#sel_app5')[0].checked = data.elem.checked;
                $('#sel_app6')[0].checked = data.elem.checked;
                form.render('checkbox');
                // console.log(data.elem.checked); //开关是否开启，true或者false
                // console.log(data.value); //开关value值，也可以通过data.elem.value得到
                // form.render('select', 'test2');
            });

            form.on('submit(find)', function (data) {
                common.find(data,'demo','/appManager/find');
                return false;
            });

            form.on('submit(add-main)', function (data) {
                let params = data.field;
                let msg = {
                    url: '/appManager/addAppData',
                    data: params
                };

              common.postMsg(msg, (data) => {
                    if (data.success) {
                        layer.closeAll();
                        layer.msg('添加成功');
                        table.reload('demo');
                    } else {
                        layer.msg(`添加失败,${data.msg}`);
                    }
                });
                return false;
            });

            form.on('submit(update-main)', function (data) {
                let params = data.field;
                let msg = {
                    url: '/appManager/editAppData',
                    data: params
                };

              common.postMsg(msg, (data) => {
                    if (data.success) {
                        layer.closeAll();
                        layer.msg('编辑成功');
                        table.reload('demo');
                    } else {
                        layer.msg(`编辑失败,${data.msg}`);
                    }
                });
                return false;
            });
    });
</script>
</body>
</html>
